<template>
	<div class="betslip-combo-bonus">
		<div class="header">
			<div class="header-left">
				{{ $t('betslip.comboBonusMin', [bettingConfigStore.comboBonusMinDisplayOdds]) }}
			</div>
			<div class="header-right">{{ $t('betslip.comboBonusRaise') }}</div>
		</div>
		<div class="body">
			<div class="tip">
				<span v-if="currPercent && !selectedLowOdds">
					{{ $t('betslip.comboBonusTipCurr', [currPercent]) }}
				</span>
				<span v-if="nextNum && nextPercent && !selectedLowOdds">
					{{ $t('betslip.comboBonusTipNext', [nextNum, nextPercent]) }}
				</span>
				<span v-if="selectedLowOdds" style="color: var(--color-danger)">
					{{ $t('betslip.comboBonusMinError', [bettingConfigStore.comboBonusMinDisplayOdds]) }}
				</span>
			</div>
			<div class="chart">
				<div
					v-for="(item, index) in list"
					:key="index"
					class="chart-item"
					:class="{ active: selectedNum > index }">
					<div v-if="item.percent" class="bubble" :class="{ active: activeIndex === index }">
						<div class="percent">{{ item.percent }}</div>
						<base-icon class="arrow" name="down"></base-icon>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { computed } from 'vue'
import { useBettingConfigStore, useBetslipStore, useMatchStore } from '@/store'

const betslipStore = useBetslipStore()
const bettingConfigStore = useBettingConfigStore()
const matchStore = useMatchStore()

const selectedLowOdds = computed(() =>
	betslipStore.comboList.some((item) => {
		const selection = matchStore.getSelection(item.eventId, item.marketId, item.id)
		return !selection || selection?.trueOdds < bettingConfigStore.comboBonusMinTrueOdds
	})
)

const selectedNum = computed(() => (!selectedLowOdds.value ? betslipStore.comboList.length : 0))

const list = computed(() => {
	const res: { number: number; percent: string }[] = []
	const comboBonus = bettingConfigStore.comboBonus
	if (comboBonus.length) {
		const total = comboBonus[comboBonus.length - 1].number
		let comboBonusIndex = 0
		for (let index = 1; index <= total; index++) {
			const item = { number: index, percent: '' }
			const { number, percent } = comboBonus[comboBonusIndex]
			if (index === number) {
				comboBonusIndex++
				item.percent = percent
			}
			res.push(item)
		}
	}
	return res
})

const activeIndex = computed(() => {
	let res = -1
	list.value.forEach((item, index) => {
		if (item.percent && selectedNum.value >= item.number) {
			res = index
		}
	})
	return res
})

const currPercent = computed(() =>
	activeIndex.value > -1 ? list.value[activeIndex.value].percent : ''
)

const nextNum = computed(() => {
	for (const { number } of bettingConfigStore.comboBonus) {
		if (number > selectedNum.value) {
			return number - selectedNum.value
		}
	}
	return 0
})

const nextPercent = computed(() => {
	for (const { number, percent } of bettingConfigStore.comboBonus) {
		if (number > selectedNum.value) {
			return percent
		}
	}
	return ''
})
</script>
<style lang="scss" scoped>
@use '@/styles/mixins.scss' as *;
.betslip-combo-bonus {
	height: 90px;
	position: relative;
	display: flex;
	flex-direction: column;
	font-size: 12px;
	@include font-bold();
	.header {
		height: 16px;
		line-height: 16px;
		display: flex;
		color: var(--color-white);
		.header-left {
			flex: 1;
			background: var(--color-primary);
			border-radius: 8px 0px 0px 0px;
			text-align: right;
			padding-right: 10px;
		}
		.header-right {
			flex: 1;
			background: var(--color-success);
			border-radius: 0px 8px 0px 0px;
			text-align: left;
			padding-left: 10px;
		}
	}
	.body {
		flex: 1;
		border-radius: 0px 0px 6px 6px;
		border: 2px solid var(--color-success);
		border-top-width: 0;
		padding: 0 6px;
		.tip {
			margin-top: 8px;
			line-height: 18px;
			text-align: center;
			margin-bottom: 18px;
			@include font-bold();
			span:not(:first-child) {
				margin-left: 4px;
			}
		}
		.chart {
			margin-top: 28px;
			display: flex;
			.chart-item {
				position: relative;
				flex: 1;
				height: 8px;
				background-color: var(--color-bg-2);
				margin-left: 2px;
				&:first-child {
					margin-left: 0;
					border-radius: 4px 0px 0px 4px;
				}
				&:last-child {
					border-radius: 0px 4px 4px 0px;
				}
				&.active {
					background-color: var(--color-success);
				}
				.bubble {
					position: absolute;
					left: -35%;
					top: -25px;
					margin: auto;
					text-align: center;
					.percent {
						@include flex-center();
						width: 44px;
						height: 20px;
						border-radius: 6px;
						@include font-bold();
						font-size: 14px;
						color: var(--color-text-3);
					}
					.arrow {
						position: relative;
						top: -7px;
						color: var(--color-text-3);
					}
					&.active {
						.percent {
							background-color: var(--color-success);
							color: var(--color-white);
						}
						.arrow {
							color: var(--color-success);
						}
					}
				}
			}
		}
	}
}
</style>
